<template>
  <div class="app-container">
    <el-card>
      <el-descriptions title="基本信息" :column="5" border>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="昵称：" style="text-align: right">
          {{ form.nickName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="性别：">
          {{ form.sex == 0 ? '男' : '女' }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="手机号码：">
          {{ form.phonenumber }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="当前角色：">
          {{ form.roleName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="推荐人：">
          {{ form.personName }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="历史累计消费金额：">
          {{ form.historicalConsumption }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="历史累计奖励金额：">
          {{ form.rewardAmount }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="当前冻结金额：">
          {{ form.freezeAmount }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="当前可用余额：">
          {{ form.availableBalance }}
        </el-descriptions-item>
        <el-descriptions-item labelClassName="diyLabelClassName" contentClassName="diyContentClassName" label="注册时间：">
          {{ form.creationTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="margin-top: 24px">
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">
          基本信息<span style="font-weight: normal;font-size: 14px">（团队总人数： {{list.length}} 人）</span></div>
      </div>
      <div class="list-box">
        <div class="list-item" v-for="(item,index) in list" :key="index">
          <div class="list-item-left">
            <div style="margin-right: 12px">
              <el-avatar :size="60" :src="item.avatar"></el-avatar>
            </div>
            <div>
              <div>{{item.nickName}}（ID：{{item.id}}）</div>
              <div style="margin-top: 8px">加入时间：{{ item.creationTime}}</div>
            </div>
          </div>
          <div style="text-align: right">
            <div>
              +{{item.revenueAmount}}
            </div>
            <div style="margin-top: 8px">
              下属{{ item.member}}个成员
            </div>
          </div>
        </div>
      </div>

    </el-card>
  </div>
</template>
<script>
import {getTeamData, getUser} from "@/api/system/staff";

export default {
  data() {
    return {
      id: '',
      form: {},
      list: [
      ]
    };
  },
  created() {
    this.id = this.$route.params.id
    if (this.id) {
      getUser(this.id).then(response => {
        this.form = response.data;
      });
      getTeamData({userId:this.id}).then(res=>{
        this.list = res.rows;
      })
    }
  },
};

</script>

<style>
.diyLabelClassName {
  text-align: right !important;
  width: 150px !important;
}

.diyContentClassName {
  width: 150px !important;
}
.list-box{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
}
.list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ebeef5;
  padding: 24px;
  font-size: 14px;
  border-radius: 4px;
}
.list-item-left{
  display: flex;
  align-items: center;
}
</style>
